<div class="main-container">
    <nz-tabset (nzSelectedIndexChange)="getData($event)">
        <nz-tab nzTitle="斗口">
            <ng-template nz-tab>
                <div class="sub-main-container">
                    <div class="search-wrap">
                        <form nz-form [nzLayout]="'inline'" [formGroup]="searchForm">
                            <nz-form-item>
                                <nz-form-label>闸门名称</nz-form-label>
                                <nz-form-control>
                                    <input formControlName="watergateCode" nz-input placeholder="设备名称"/>
                                </nz-form-control>
                            </nz-form-item>
                            <nz-form-item>
                                <nz-form-control>
                                    <button nz-button nzType="primary" (click)="queryInfo(true)"><i nz-icon nzType="search"></i>查询</button>
                                </nz-form-control>
                            </nz-form-item>
                        </form>
                    </div>

                    <div class="main-wrap">
                        <nz-table #dataTable
                                  class="main-table"
                                  [nzData]="tableData"
                                  [nzTotal]="total"
                                  [nzWidthConfig]="tableWidthConfig"
                                  [nzFrontPagination]="false"
                                  [(nzPageIndex)]="pageNum"
                                  [(nzPageSize)]="pageSize"
                                  [nzLoading]="loading"
                                  (nzPageIndexChange)="queryInfo()"
                                  nzBordered
                                  nzSize="middle">
                            <thead>
                            <tr>
                                <th>序号</th>
                                <th>闸门名称</th>
                                <th>采集时间</th>
                                <th>流量（m³/s）</th>
                                <th>闸前水位（m）</th>
                                <th>闸后水位（m）</th>
                                <th>闸门当前开度（mm）</th>
                                <th>电机电流</th>
                                <th>电池电压</th>
                                <th>运行状态</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr *ngFor="let data of dataTable.data; let idx = index;">
                                <td>{{pageSize * (pageNum - 1) + idx + 1}}</td>
                                <td>{{data.watergateCode}}</td>
                                <td>{{data.gatherTime | date: 'yyyy-MM-dd HH:mm:ss'}}</td>
                                <td>{{data.flux}}</td>
                                <td>{{data.heightUp}}</td>
                                <td>{{data.heightDown}}</td>
                                <td>{{data.degree}}</td>
                                <td>{{data.electricity}}</td>
                                <td>{{data.vlotage}}</td>
                                <td>{{data.runstatus}}</td>
                            </tr>
                            </tbody>
                        </nz-table>
                    </div>
                </div>

            </ng-template>

        </nz-tab>
        <nz-tab nzTitle="大闸">
            <ng-template nz-tab>
                <div class="sub-main-container">
                    <div class="search-wrap">
                        <form nz-form [nzLayout]="'inline'" [formGroup]="searchForm1">
                            <nz-form-item>
                                    <nz-form-label>闸门名称</nz-form-label>
                                    <nz-form-control>
                                        <input formControlName="watergateCode" nz-input placeholder="设备名称"/>
                                    </nz-form-control>
                            </nz-form-item>
                            <nz-form-item>
                                <nz-form-control>
                                    <button nz-button nzType="primary" (click)="queryGateInfo()"><i nz-icon nzType="search"></i>查询</button>
                                </nz-form-control>
                            </nz-form-item>
                        </form>
                    </div>

                    <div class="main-wrap">
                        <nz-table #dataTable1
                                  class="main-table"
                                  [nzData]="tableData1"
                                  [nzLoading]="loading1"
                                  [(nzPageIndex)]="pageNum1"
                                  [nzPageSize]="pageSize1"
                                  nzBordered
                                  nzSize="middle">
                            <thead>
                            <tr>
                                <th [rowSpan]="2">序号</th>
                                <th [rowSpan]="2">闸门名称</th>
                                <th [rowSpan]="2">闸前水位(m)</th>
                                <th [colSpan]="6">开度(m)</th>
                            </tr>
                            <tr>
                                <th>1号闸口</th>
                                <th>2号闸口</th>
                                <th>3号闸口</th>
                                <th>4号闸口</th>
                                <th>5号闸口</th>
                                <th>6号闸口</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr *ngFor="let data of dataTable1.data; let idx = index;">
                                <td>{{pageSize1 * (pageNum1 - 1) + idx + 1}}</td>
                                <td>{{data.watergateCode}}</td>
                                <td>{{data.WaterLevel}}</td>
                                <td>{{data.Position_1}}</td>
                                <td>{{data.Position_2}}</td>
                                <td>{{data.Position_3}}</td>
                                <td>{{data.Position_4 || '/'}}</td>
                                <td>{{data.Position_5 || '/'}}</td>
                                <td>{{data.Position_6 || '/'}}</td>
                            </tr>
                            </tbody>
                        </nz-table>
                    </div>
                </div>
            </ng-template>
        </nz-tab>
    </nz-tabset>
</div>
